<script setup lang='ts'>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router"
import { useUserStore } from "@/store/modules/user";
const route = useRoute();
const router = useRouter();
const user = useUserStore();
const tims = ref<number>(10);
const Interval = setInterval(() => {
  tims.value--;
  if (tims.value <= 0) {
    user.logOut()
    clearInterval(Interval)
  }
}, 1000)
router.beforeEach((to, from) => {
  user.logOut()
  return false;
})
</script>

<template>
  <div class="mark_main">
    <div class="mark_box">
      <h2 class="mark_titile">您的竞赛成绩</h2>
      <div class="mark_sorc">{{ route.query.score }}分</div>
    </div>
    <p class="mark_tips">您已提交，<text class="text-red-700">{{ tims }}</text> 秒后自动跳到登录页...</p>
  </div>
</template>

<style scoped lang="scss">
.mark_main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 600px;
  height: 360px;
  --title_h: 60px;


  .mark_box {
    width: 100%;
    height: calc(100% - 40px);
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #e9f3ff;
  }

  .mark_titile {
    width: 100%;
    height: var(--title_h);
    font-size: 34px;
    line-height: 60px;
    color: #5b82cc;
    text-align: center;
    background-color: #e9f3ff;
  }

  .mark_sorc {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 78px;
    font-weight: bold;
    width: 100%;
    height: calc(100% - var(--title_h));
    text-align: center;
    color: #6489cf;
  }

  .mark_tips {
    text-align: center;
    font-size: 26px;
    color: #9c9c9c;
  }
}
</style>
